<template>
  <div>
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      style="position: relative"
    >
      <el-tab-pane :label="titles[0]" name="caseDetail">
        <CaseDetail
          ref="caseDetail"
          @callBack="handleCallBack"
          :claimSettlement="claimSettlement"
        ></CaseDetail>
      </el-tab-pane>
      <el-tab-pane :label="titles[1]" name="caseSettlement">
        <CaseSettlement
          ref="caseSettlement"
          @callBack="handleCallBack"
          :claimSettlement="claimSettlement"
        ></CaseSettlement>
      </el-tab-pane>
      <el-tab-pane :label="titles[2]" name="caseSituation">
        <CaseSituation
          ref="caseSituation"
          @callBack="handleCallBack"
          :claimSettlement="claimSettlement"
        ></CaseSituation>
      </el-tab-pane>
      <el-tab-pane :label="titles[3]" name="caseClose">
        <CaseClose
          ref="caseClose"
          @callBack="handleCallBack"
          :claimSettlement="claimSettlement"
        ></CaseClose>
      </el-tab-pane>
      <el-tab-pane v-if="false" :label="titles[4]" name="casePay">
        <CasePay
          ref="casePay"
          @callBack="handleCallBack"
          :claimSettlement="claimSettlement"
        ></CasePay>
      </el-tab-pane>
    </el-tabs>
    <div style="position: absolute; top: 88px; right: 72px">
      <el-row
        v-if="
          claimSettlement.caseStatus == 1 ||
          claimSettlement.caseStatus == 2 || claimSettlement.caseStatus == 5
        "
      >
        <el-button
          type="text"
          style="font-size: 16px"
          icon="el-icon-remove-outline"
          @click="settlementCancel"
          :loading="cancelLoading"
          >{{
            claimSettlement.settlementOrder == 1 ? "撤销案件" : "撤销二次理赔"
          }}</el-button
        >
      </el-row>
      <el-row
        style="margin-top: 15px"
        v-if="
          !hasSecond &&
          claimSettlement.settlementOrder == 1 &&
          (claimSettlement.caseStatus == 3 || claimSettlement.caseStatus == 4)
        "
      >
        <el-button
          type="text"
          icon="el-icon-circle-plus-outline"
          @click="secondSettlement"
          style="color: orange"
          :loading="secondLoading"
          >二次理赔</el-button
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import CaseDetail from "./case-detail.vue";
import CaseSettlement from "./case-settlement.vue";
import CaseSituation from "./case-situation.vue";
import CaseClose from "./case-close.vue";
import CasePay from "./case-pay.vue";

export default {
  data() {
    return {
      activeName: "",
      cancelLoading: false,
      secondLoading: false,
      titles: [
        "报案详细信息",
        "理赔详细资料",
        "案件记录情况",
        "结案详细信息",
        "理赔款支付",
      ],
      claimSettlement: {
        id: "",
        settlementOrder: "",
        caseStatus: "",
        caseId: "",
      },
      hasSecond: false,
      showPay: true,
    };
  },
  components: {
    CaseDetail,
    CaseSettlement,
    CaseSituation,
    CaseClose,
    CasePay,
  },
  created() {
    this.claimSettlement.id = this.$route.query.id;
    this.queryClaimSettlementInfo();
    this.activeName = "caseDetail";
    this.$nextTick(() => {
      this.$refs[this.activeName].init();
    });
  },
  methods: {
    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs[this.activeName].init();
      });
    },
    handleCallBack: function (showPay, refresh) {
      console.log("handleCallBack", showPay, refresh);
      if (showPay != null && showPay !== "") {
        this.showPay = showPay;
      }
      if (refresh) {
        this.queryClaimSettlementInfo();
      }
    },
    queryClaimSettlementInfo: function () {
      let _this = this;
      this.$http({
        url: this.$http.adornUrl(
          "/claim/claimsettlement/query/" + this.claimSettlement.id
        ),
        method: "POST",
      }).then(({ data }) => {
        console.log("data", data);
        if (data && data.code === 0) {
          _this.claimSettlement = data.data.claimSettlement;
          _this.hasSecond = data.data.hasSecond;
          this.$nextTick(() => {
            this.$refs[this.activeName].init();
          });
          if (_this.claimSettlement.settlementOrder === 2) {
            for (let i = 0; i < _this.titles.length; i++) {
              if (_this.titles[i].indexOf("二次") === -1) {
                _this.titles[i] = "二次" + _this.titles[i];
              } else {
                break;
              }
            }
          }
        } else {
          _this.$message.error(" 该记录异常，请刷新后再试 ");
        }
      });
    },
    settlementCancel: function () {
      this.cancelLoading = true;
      this.$confirm("将操作将进行【撤销案件】, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.doSettlementCancel();
        })
        .catch(() => {
          this.cancelLoading = false;
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    secondSettlement: function () {
      this.secondLoading = true;
      this.$confirm("将操作将进行【二次理赔】, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.doSecondSettlement();
        })
        .catch(() => {
          this.secondLoading = false;
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    doSecondSettlement: function () {
      let _this = this;
      this.$http({
        url: this.$http.adornUrl("/claim/claimsettlement/second?"),
        method: "POST",
        contentType: "form",
        params: this.$http.adornParams({
          caseId: this.claimSettlement.caseId,
        }),
      }).then(({ data }) => {
        _this.secondLoading = false;
        if (data && data.code === 0) {
          _this.activeName = "caseDetail";
          _this.claimSettlement = data.data;
          this.$router.replace({
            query: { id: _this.claimSettlement.id },
          });
          this.$nextTick(() => {
            this.$refs[this.activeName].init();
          });
        } else {
          _this.$message.error(data.msg);
        }
      });
    },
    doSettlementCancel: function () {
      let _this = this;
      this.$http({
        url: this.$http.adornUrl("/claim/claimsettlement/cancel?"),
        method: "POST",
        contentType: "form",
        params: this.$http.adornParams({
          csId: _this.claimSettlement.id,
        }),
      }).then(({ data }) => {
        _this.cancelLoading = false;
        if (data && data.code === 0) {
          _this.claimSettlement = data.data;
        } else {
          _this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>
